<template>
	<view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="active==0?'text-green cur':''" @tap="tabSelect(0)">
					待处理
				</view>
				<view class="cu-item flex-sub" :class="active==1?'text-green cur':''" @tap="tabSelect(1)">
					处理中
				</view>
				<view class="cu-item flex-sub" :class="active==2?'text-green cur':''" @tap="tabSelect(2)">
					完成
				</view>
			</view>
		</scroll-view>


		<!---->
		<view v-if="active == 0" class="ppfl_c">
			<view v-if="waitRepair.length>0">

				<view v-for="(item,index) in waitRepair" :key="index" 
					class="bg-white margin-top margin-right-xs radius margin-left-xs padding">
					<view class="flex padding-bottom-xs solid-bottom justify-between">
						<view>工单编码</view>
						<view class="text-gray">{{item.workOrderNum}}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">报修人</view>
						<view class="text-gray">{{item.repairsPerson}}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">位置</view>
						<view class="text-gray">{{item.place}}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">预约处理时间</view>
						<view class="text-gray">{{item.appointmentTime}}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">状态</view>
						<view class="text-gray">待处理</view>
					</view>

					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">报修内容</view>
						<view class="text-gray">{{item.repairsMatter}}</view>
					</view>
					<view class="solid-top flex justify-end margin-top padding-top-sm ">
						<button class="cu-btn sm bg-common round-btn" @click="repairDetail(item)">详情</button>
						<button class="cu-btn sm bg-red margin-left round-btn" @click="deleteRepair(item)">删除</button>
					</view>
				</view>
			</view>
			<view v-else>
				<no-data-page></no-data-page>
			</view>
		</view>

		<view v-if="active == 1" class="ppfl_c">
			<view v-if="doingRepair.length>0 ">

				<view v-for="(item,index) in doingRepair" :key="index"
					class="bg-white margin-top margin-right-xs radius margin-left-xs padding">
					<view class="flex padding-bottom-xs solid-bottom justify-between">
						<view>工单编码</view>
						<view class="text-gray">{{item.workOrderNum}}</view>
					</view>
					<!-- 					<view class="flex margin-top justify-between">
						<view class="text-gray">报修类型</view>
						<view class="text-gray">{{item.typeName}}</view>
					</view> -->
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">报修人</view>
						<view class="text-gray">{{item.repairsPerson}}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">位置</view>
						<view class="text-gray">{{item.place}}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">开始处理时间</view>
						<view class="text-gray">{{item.startTime}}</view>
					</view>
					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">状态</view>
						<view class="text-gray">处理中</view>
					</view>

					<view class="flex margin-top-xs justify-between">
						<view class="text-gray">报修内容</view>
						<view class="text-gray">{{item.repairsMatter}}</view>
					</view>
				</view>
			</view>
			<view v-else>
				<no-data-page></no-data-page>
			</view>
		</view>

		<view v-if="active == 2" class="ppfl_c">
			<view v-if="repaired.length>0">

				<view v-for="(item,index) in repaired" :key="index" v-if="noData == false">

					<view class="bg-white margin-top margin-right-xs radius margin-left-xs padding">
						<view class="flex padding-bottom-xs solid-bottom justify-between">
							<view>工单编码</view>
							<view class="text-gray">{{item.workOrderNum}}</view>
						</view>
						<!-- 					<view class="flex margin-top justify-between">
						<view class="text-gray">报修类型</view>
						<view class="text-gray">{{item.typeName}}</view>
					</view> -->
						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">报修人</view>
							<view class="text-gray">{{item.repairsPerson}}</view>
						</view>
						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">位置</view>
							<view class="text-gray">{{item.place}}</view>
						</view>
						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">处理结束时间</view>
							<view class="text-gray">{{item.endTime}}</view>
						</view>
						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">状态</view>
							<view class="text-gray">已处理</view>
						</view>

						<view class="flex margin-top-xs justify-between">
							<view class="text-gray">报修内容</view>
							<view class="text-gray">{{item.repairsMatter}}</view>
						</view>
						<view class="solid-top flex justify-end margin-top padding-top-sm ">
							<button class="cu-btn sm bg-common round-btn" @click="repairDetail(item)">详情</button>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<no-data-page></no-data-page>
			</view>
		</view>

		<view class="cu-modal" :class="deleteRepairModal==true?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">温馨提示</view>
					<view class="action" @tap="_cancleDeleteOwnerMember()">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					您确认删除?
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action margin-0 flex-sub  solid-left" @tap="_cancleDeleteOwnerMember()">取消</view>
					<view class="action margin-0 flex-sub text-green solid-left" @tap="_doDeleteOwnerMember()">删除</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import noDataPage from '@/components/no-data-page/no-data-page.vue'
	import context from '../../lib/java110/Java110Context.js';
	const factory = context.factory;;
	const constant = context.constant;
	export default {
		data() {
			return {
				active: 0,
				userId: '',
				roomId: '',
				communityId: '1',
				waitRepair: '',
				doingRepair: [],
				repaired: [],
				curOwnerMember: '', //保修单ID
				deleteRepairModal: false,
				backRepairModal: false,
				curRepair: {},
				noData: false,
				preStaffId: '',
				preStaffName: '',
				context: '',
				bindState:''
			}
		},
		components: {
			noDataPage
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let that = this;
			context.onLoad(options);
			let identity = uni.getStorageSync("bindUserInfo");
			that.bindState = identity.bindState
			
			let communityIdTrue = uni.getStorageSync("_selectCommunity");
			this.communityId = communityIdTrue.id
			
			let commonUserIdNum = uni.getStorageSync("commonUser");
			this.userId = commonUserIdNum.id
			
			this._loadRepair()
			this._loadRepairIng()
			this._loadRepairEd()
		},

		onShow: function() {
			// if (this.userId && this.communityId) {
				this._loadRepair(this.active);
			// }
		},
		methods: {
			/**
			 * 加载我的报修--待完成
			 */
			_loadRepair: function(_active) {
				let that = this;
				uni.request({
					// context.request({
					// url: _url,
					url: constant.url.listOwnerRepairs,
					header: context.getHeaders(),
					method: "GET",
					data: {
						communityId: that.communityId,
						state: 0,
						userId:this.userId
					},
					success: function(res) {
						console.log("报修", res.data.data)
						that.waitRepair = res.data.data;
						// let _json = res.data;
						// if (_json.code == 0) {
						// 	let _ownerRepairs = _json.data;
						// 	console.log('_ownerRepairs', _ownerRepairs);
						// 	// if (_ownerRepairs.length < 1) {
						// 	// 	that.noData = true;
						// 	// } else {
						// 	// 	that.noData = false;
						// 	// }
						// 	that.waitRepair = _ownerRepairs;
						// }
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			/**
			 * 加载我的报修 -- 处理中
			 */
			_loadRepairIng: function(_active) {
				let that = this;
				uni.request({
					// context.request({
					// url: _url,
					url: constant.url.listOwnerRepairs,
					header: context.getHeaders(),
					method: "GET",
					data: {
						communityId: that.communityId,
						state: 2,
						userId:this.userId
					},
					success: function(res) {
						console.log("处理中", res.data)
						let _json = res.data;
						if (_json.code == 0) {
							let _ownerRepairs = _json.data;
							console.log('_ownerRepairs', _ownerRepairs);
							if (_ownerRepairs.length < 1) {
								that.noData = true;
							} else {
								that.noData = false;
							}
							that.doingRepair = _ownerRepairs;
						}

						// 			wx.showToast({
						// 				title: "查询报修单失败",
						// 				icon: 'none',
						// 				duration: 2000
						// 			});
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			/**
			 * 加载我的报修 -- 已完成
			 */
			_loadRepairEd: function(_active) {
				let that = this;
				uni.request({
					// context.request({
					// url: _url,
					url: constant.url.listOwnerRepairs,
					header: context.getHeaders(),
					method: "GET",
					data: {
						communityId: that.communityId,
						state: 3,
						userId:this.userId
					},
					success: function(res) {
						console.log("已完成", res.data)
						let _json = res.data;
						if (_json.code == 0) {
							let _ownerRepairs = _json.data;
							console.log('_ownerRepairs', _ownerRepairs);
							if (_ownerRepairs.length < 1) {
								that.noData = true;
							} else {
								that.noData = false;
							}
							that.repaired = _ownerRepairs;
						}

						// wx.showToast({
						// 	title: "查询报修单失败",
						// 	icon: 'none',
						// 	duration: 2000
						// });
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			/**
			 * 加载我的报修 -- 删除
			 */
			_cancleCall: function() {
				this.deleteRepairModal = false;
			},
			deleteRepair: function(item) {
				this.deleteRepairModal = true;
				this.curOwnerMember = item;
				console.log("this.curOwnerMember", this.curOwnerMember)
			},
			_cancleDeleteOwnerMember: function(item) {
				this.deleteRepairModal = false;
			},
			_doDeleteOwnerMember: function() {
				let that = this;
				console.log("444", that.curOwnerMember.poolId, that.curOwnerMember.state)
				uni.request({
					url: constant.url.deleteOwnerRepair,
					header: context.getHeaders(),
					method: "GET",
					data: {
						poolId: that.curOwnerMember.poolId,
						state: that.curOwnerMember.state,
					},
					success: function(res) {
						console.log("已完成", res)
						wx.showToast({
							title: "删除成功",
							icon: 'none',
							duration: 2000
						});
						that._loadRepair()
						that.deleteRepairModal = false;
					},
					fail: function(e) {
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						})
					}
				})
			},

			onChange: function(e) {
				console.log(e);

				this._loadRepair(e.detail.index);
			},
			tabSelect: function(_active) {
				this.active = _active;
				this._loadRepair(_active);
				this._loadRepairIng(_active)
				this._loadRepairEd(_active)
			},
			// 详情
			repairDetail: function(_repair) {
				// context.navigateTo({
				// 	url: '/pages/repairDetail/repairDetail?repairId=' + _repair.repairId
				// });
				uni.navigateTo({
					url: '/pages/repairDetail/repairDetail?poolId=' + JSON.stringify(_repair)
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	text {
		text-align: center;
	}

	.solid-bottom::after {
		border-bottom: 2upx solid rgba(0, 0, 0, 0.1);
	}

	/deep/ .cu-btn.sm {
		padding: 0rpx 50rpx;
		font-size: 20rpx;
		height: 48rpx;
	}
</style>
